<template>
  <div class="login-container">
    <!-- 
      el-form 表单组件
      每个表单项都必须使用 el-form-item 组件包裹
     -->
    <div class="login-head"></div>
    <el-form ref="login-form" :model="user" class="login-form" :rules="formRules">
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="user.code" placeholder="验证码"></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="user.agree"
          >我已阅读并同意用户协议和隐秘条款</el-checkbox
        >
      </el-form-item>
      <el-form-item>
        <el-button
          class="login-btn"
          type="primary"
          @click="onLogin"
          :loading="loginLoading"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { login } from '@/api/user'

export default {
  name: "Login",
  data() {
    return {
      user: {
        mobile: "13911111111",
        code: "246810",
        agree: false  // 是否同意协议书
      },
      loginLoading: false,
      formRules: { // 表单验证规则配置
        // 要验证的数据名称：规则列表[]
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'change' },
          { pattern: /^\d{6}$/, message: '请输入正确的验证码格式' }
        ],
        agree: [
          {
            // 自定义校验规则：https://element.eleme.cn/#/zh-CN/component/form#zi-ding-yi-xiao-yan-gui-ze
            // 验证通过：callback()
            // 验证失败：callback(new Error('错误消息'))
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              } else {
                callback(new Error('请同意用户协议'))
              }
            },
            // message: '请勾选同意用户协议',
            trigger: 'change'
          }
        ]
      }
    };
  },
  methods: {
    onLogin() {
      // 获取表单数据（根据接口要求绑定数据）
      // const user = this.user;

      // 表单验证
      // validate 方法是异步的
      this.$refs['login-form'].validate(valid => {
        // 如果表单验证失败，停止请求提交
        if (!valid) {
          return
        }
        // 验证通过，请求登录
        this.login()
      })
    },

      // 验证通过，提交登录
    login(){
      // 开启登录 loading...
      this.loginLoading = true;

      login(this.user)
        .then((res) => {
          console.log(res);
          // 登录成功
          this.$message({
            message: "登录成功",
            type: "success",
          });
          // 关闭 loading
          this.loginLoading = false;
          this.$router.push({
            name: 'home'
          })
        }).catch((err) => {
          console.log("登录失败", err);
          // 登录失败
          this.$message.error("登录失败，验证码错误");
          // 关闭 loading
          this.loginLoading = false;
        });
    },
  },
};
</script>

<style>
  .login-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url(./login_bg.jpg) no-repeat;
    background-size: cover;
  }
  .login-form {
    background-color: #fff;
    padding: 45px;
    min-height: 100px;
    min-width: 300px;
  }
  .login-btn {
    width: 100%;
  }
  .login-head {
    width: 300px;
    height: 60px;
    background: url("./login_index.jpg") no-repeat;
    margin-bottom: 30px;
  }
</style>